<template>
    <!-- 添加对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false">
        <el-form :model="form" ref="form" size="small" label-width="120px" :rules="rules">
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="$locale('student.add.experiment.experiment')" prop="experimentName">
                        {{form.experimentName}}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('myExperiment.task.Starting and ending dates of homework')" prop="dateRange">
                        <el-date-picker v-model="form.dateRange" style="width: 100%" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('student.student')" prop="studentList">
                        <!-- <el-select clearable v-model="form.studentList" placeholder="请输入学生" multiple style="width:100%">
                            <el-option v-for="item in 12" :key="item" :value="item">{{item}}</el-option>
                        </el-select> -->
                        <el-button size="small" type="primary" @click="studentClick">{{ $locale('myExperiment.task.add') }}</el-button>
                        <!-- <el-input @click="studentClick" placeholder="请选择学生" v-model="form.studentList" disabled></el-input> -->
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('classList.add.notes')" prop="remark">
                        <el-input type="textarea" :rows="3" :placeholder="$locale('classList.add.Please enter at least five characters')" v-model="form.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">{{ $locale('classList.add.determine') }}</el-button>
            <el-button @click="cancel">{{ $locale('classList.add.Cancel') }}</el-button>
        </div>

        <el-dialog width="60%" :title="$locale('student.student')" :visible.sync="innerVisible" append-to-body>
            <studentListDialog @addStudentList="addStudentList" ref="studentListDialog" />
        </el-dialog>
    </el-dialog>
</template>

  <script>
import { add } from "@/api/myClass/jobList";
import studentListDialog from '../add/studentListDialog.vue'

export default {
    components: { studentListDialog },
    name: "proposal",
    data () {
        return {
            innerVisible: false,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 表单参数
            form: {
                dateRange: [],
                studentList: [],
                experimentName: '',
                remark: ''
            },
            // 表单校验
            rules: {
                dateRange: [
                    { required: true, message: this.$locale('myExperiment.task.The start and end dates of homework cannot be empty'), trigger: "change" }
                ],
                studentList: [
                    { required: true, message: this.$locale('myExperiment.task.Students cannot be left blank'), trigger: "change" }
                ]
            }
        };
    },
    created () {
    },
    methods: {
        // 表单重置
        reset () {
            this.form = {};
            this.resetForm("form");
        },
        show (row) {
            this.reset();
            this.form = JSON.parse(JSON.stringify(row))
            this.open = true;
            this.title = this.$locale('myExperiment.task.Assign homework');
        },
        studentClick () {
            this.innerVisible = true
            this.$nextTick(() => {
                this.$refs.studentListDialog.resetQuery(this.form.studentList || [])
            })
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.experimentId = this.form.id
                    this.form.startWorkTime = this.form.dateRange[0]
                    this.form.endWorkTime = this.form.dateRange[1]
                    // let obj = {
                    //     experimentId: this.form.id,
                    //     startWorkTime: this.form.dateRange[0],
                    //     endWorkTime: this.form.dateRange[1],
                    //     experimentName: this.form.experimentName,
                    //     experimentId: this.form.remark,
                    //     studentList: this.form.studentList,
                    // }
                    add(this.form).then(response => {
                        this.$modal.msgSuccess(this.$locale('geWudevice.add.tip6'));
                        this.open = false;
                        this.$emit('getList');
                    });
                }
            });
        },
        addStudentList (studentList) {
            this.form.studentList = studentList
            this.innerVisible = false
        },
        // 取消按钮
        cancel () {
            this.open = false;
            this.reset();
        },
    }
};
</script>

<style lang="scss" scoped>
.el-rate {
    line-height: 2;
}
</style>
